<template>
  <div id="app">
    <div id="nav">
      <!-- tag 是渲染后的标签, 默认是 a -->
      <!-- 增加 replace 可以让history 不能返回 -->
      <!-- active-class 是激活当前标签时的class名称 -->
      <router-link to="/home" tag="button" replace active-class="active">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link :to="'/user/' + userId">User</router-link> |
      <router-link to="/user?id=1&amp;name=hh">queryUser1</router-link> |
      <router-link :to="{path:'/user', query: {id:2, name:'tt'}}">queryUser2</router-link>
      <hr>
      <button @click="homeClick">首页</button>
      <button @click="aboutClick">关于</button>
    </div>
    <!-- 防止组件重新渲染, 减少性能损失 -->
    <!-- exclude 排除需要缓存的组件, 中间不要加空格 -->
    <keep-alive  exclude="User,About">
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data: () => ({
      userId: '张三'
    }),
    methods: {
      homeClick() {
        // 不要绕过 vue-router 去修改url
        // this.$router.push("/home");
        this.$router.replace('/home');
      },
      aboutClick() {
        // this.$router.push('/about');
        this.$router.replace('/about');
      }
    }
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}

#nav button.router-link-exact-active {
  color: darkred;
}
</style>
